<template>
  <div>
    <div class="werapp">
      <h1>~ Today I need to ~</h1>
      <div class="box">
        <input type="text" placeholder="Add new todo..." v-model="value" />
        <button @click.enter="adds"><span>Submit</span></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    adds() {
      var obj = {
        id:new Date().toLocaleTimeString(),
        value: this.value,
        checked: false,
      };
    this.$store.commit("adds",obj);
      this.value = "";
    },
  },
};
</script>

<style scoped>
.werapp h1 {
  font-size: 22px;
  margin-bottom: 18px;
}
.box {
  display: flex;
  justify-content: center;
}
.box input {
  width: 100%;
  border-bottom: 3px dashed #fe7345;
  padding: 5px 0 3px;
  font-size: 18px;
  background: transparent;
}
.box button {
  position: relative;
  transform: rotate(4deg);
  border-radius: 6px;
  background-color: #fe7345;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.box button:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  transform: scaleY(1.1);
  border: 1px solid #494a4b;
  border-radius: inherit;
  transform-origin: top;
  background-image: url();
  background-color: #fe7345;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.box button span {
  position: relative;
  display: block;
  font-size: 16.5px;
  padding: 0.34em 0.84em;
  border: 2px solid #494a4b;
  border-radius: inherit;
  background-color: #fff;
}
</style>